<template>
  <div class="wrapper">
  <swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img class="swiper-img" :src="item.imgUrl" />
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
  name:'HomeSwiper',
  data (){ //其实是 data:function(){} ,function可以省略
    return{
      swiperOption:{
        pagination:'.swiper-pagination',
        loop:true
      },
      swiperList:[{
        id:'0001',
        imgUrl:'https://img1.qunarzz.com/vc/bf/9d/a3/67b7b37511fa26a78298bf1da1.jpg'
      },{
        id:'0002',
        imgUrl:'https://img1.qunarzz.com/vc/2a/96/76/d149c7a3a5b113f876f9a66e09.png'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background:#fff
  .wrapper
    overflow:hidden
    width:100%
    height:0 /*不用height的原因,是因为height是相对父元素*/
    padding-bottom:32%/*能够实现高度是宽度的32 , 还可以 不用那么复杂,width:100%  height:32%vw 但是可能浏览器兼容不好*/
    .swiper-img
      width:100%


</style>
